import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../common/values/values.dart';

class WelcomePage extends StatefulWidget {
  const WelcomePage({super.key});

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  Widget buildTitle(String title) {
    return Container(
      margin: EdgeInsets.only(top: 65),
      child: Text(
        title,
        textAlign: TextAlign.center,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: 'Montserrat',
          fontWeight: FontWeight.w600,
          fontSize: 24,
        ),
      ),
    );
  }

  Widget buildHeader(String header) {
    return Container(
      width: 242,
      height: 70,
      margin: EdgeInsets.only(top: 14),
      child: Text(
        header,
        textAlign: TextAlign.center,
        style: TextStyle(
          color: AppColors.primaryText,
          fontFamily: 'Avenir',
          fontWeight: FontWeight.normal,
          fontSize: 16,
          height: 1.3,
        ),
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }

  Widget buildFeatureItem(String imgUrl, String feature, double marginTop) {
    return Container(
      width: 295,
      height: 80,
      margin: EdgeInsets.only(top: marginTop),
      child: Row(
        children: [
          Container(
            width: 80,
            height: 80,
            child: Image.network(
              imgUrl,
              fit: BoxFit.cover,
            ),
          ),
          Spacer(),
          Container(
            width: 195,
            child: Text(
              feature,
              textAlign: TextAlign.left,
              style: const TextStyle(
                color: AppColors.primaryText,
                fontFamily: 'Avenir',
                fontWeight: FontWeight.w400,
                fontSize: 16,
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget buildBottom(String text) {
    return Container(
      width: 295,
      height: 44,
      margin: const EdgeInsets.only(bottom: 48),
      child: TextButton(
        child: Text(
          text,
          style: TextStyle(
            color: AppColors.primaryElementText,
            fontSize: 18,
          ),
        ),
        onPressed: () {
          Navigator.pushNamed(context, '/sign-in');
        },
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(AppColors.primaryElement),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context); // 屏幕适配工具

    return Scaffold(
      body: Center(
        child: Column(
          children: [
            buildTitle('腾牛个性网'),
            buildHeader(
                '微信头像大全-微信头像图片-微信头像男生女生-QQ性感头像男生女生-非主流性感头像-霸气性感头像带字的-腾牛个性网'),
            buildFeatureItem(
                'https://p.qqan.com/up/2024-2/2024289544323.jpg',
                '2024明媚阳光感的女头 换上心情会变好的女头',
                68),
            buildFeatureItem(
                'https://p.qqan.com/up/2024-1/202411984481437.jpg',
                '新年氛围感红色女头动漫 往后的日子都是崭新的谁也别回头看',
                40),
            buildFeatureItem(
                'https://p.qqan.com/up/2024-1/20241693385935.jpg',
                '2024新年用的花棉袄时尚插画头像 奔向美好的一年吧好事会继续发生',
                40),
            buildFeatureItem(
                'https://p.qqan.com/up/2023-12/20231214845146705.jpg',
                '2024幸福感爆棚的冬日情头动漫 瞬间感觉到温暖的冬日情头',
                40),
            Spacer(),
            buildBottom('我也来一个'),
          ],
        ),
      ),
    );
  }
}
